<!doctype html>
<html lang="us">
<head>
	<meta charset="utf-8">
	<title>Լաբարատոր մաս</title>
	<link href="css/ui-lightness/jquery-ui-1.9.2.custom.css" rel="stylesheet">
	<link href="physic.css" rel="stylesheet">
	<link href="label.css"  rel="stylesheet">
	<link href="result.css"  rel="stylesheet">
	<script src="js/jquery-1.8.3.js"></script>
	<script src="js/jquery-ui-1.9.2.custom.js"></script>
	<script src="js/jquery.ui.touch-punch.min.js"></script>
	<script src="canvas.js"></script> 
	<script>
$(function() {
//init sliders	
$( "#high" ).slider({
	range: "min",
	min: 0,
	max: 50,
	value: 0,
	slide: function(event, ui) {  
		var id =$(this).attr("id");
		jQuery("#"+id+"-text").text('H='+ui.value+'m');
    }
	
});
$( "#corner" ).slider({
	min: 1,
	max: 90,
	value: 45,
	range: "min",
	slide: function(event, ui) {  
		var id =$(this).attr("id");
		jQuery("#"+id+"-text").html("&alpha;="+ui.value+"&deg;");
    }
	
});
$( "#speed" ).slider({
	min: 10,
	max: 60,
	value: 55,
	range: "min",
	slide: function(event, ui) {  
		var id =$(this).attr("id");
		jQuery("#"+id+"-text").html('V<sub>0</sub>='+ui.value+' m/s');
    }	
});

// button connect
$( ".button" ).mousedown(function(){
	  var id = $(this).attr("id");
	  var idArray = id.split('-');
	  if(idArray[2]=="up"){ 
	  var val = jQuery("#"+idArray[0]).slider("value");
	  val++;
	  }
 	  if(idArray[2]=="down"){
	  var val = jQuery("#"+idArray[0]).slider("value");
	  val--; 
	  }
	  var val = parseInt(val); 
	  jQuery("#"+idArray[0]).slider("value",val);
	  switch (idArray[0]) {
	   case 'high':
		  var text='H='+$("#"+idArray[0]).slider("value")+'m'
		  break
	   case 'corner':
		  var text="&alpha;="+$("#"+idArray[0]).slider("value")+"&deg;"
		  break
	   case 'speed':
		  var text='V<sub>0</sub>='+$("#"+idArray[0]).slider("value")+' m/s'
		  break
	  }
	  jQuery("#"+idArray[0]+"-text").html(text);
    });

$("#right").buttonset();
//result animation
var state = true;
        $( "#button" ).click(function() {
                $( "#effect" ).animate({
                    backgroundColor: "#aa0000",
                    color: "#fff",
                    hight: 600
                }, 1000 );
        });
        $( "#cleen" ).click(function() {
				$("#showdiv").hide();
                $( "#effect" ).animate({
                    backgroundColor: "#fff",
                    color: "#000",
                }, 1000 );
        });		
//select elements for canvas
cRange = $("#corner");
hRange = $("#high");
sRange = $("#speed");
});
	</script>
	<style>
	 .ui-slider-range { background: #729fcf; }
	/*  cursor sizes*/
	.ui-slider .ui-slider-handle {
		width: 20px; 
	    height: 25px; 
	}

	/* line sizes */
	.ui-slider-horizontal {
	     height: 15px;
	}
	#button .ui-button-text,#cleen .ui-button-text{
    font-size: 25px;    
	}
	.ui-button-text {
    font-size: 15px;
    }
	/* ������������� �������� */
	.ui-slider-horizontal .ui-slider-handle {
	    top: -5px;
	    margin-left: -6px;
	}
	</style>
</head>
<body>
<header>physic lessons</header>
<div id="right" >
<span id="high-text">H=0m </span></br>
<button class="button" id="high-button-down" ><</button>&nbsp;
<span class="slider" id="high"></span>
<button class="button" id="high-button-up">></button>
</br>
<span id="corner-text">&alpha;=45&deg;</span></br>
<button class="button" id="corner-button-down" ><</button>&nbsp;
<span class="slider"  id="corner"></span>
<button class="button" id="corner-button-up">></button>
</br>
<span  id="speed-text" > V<sub>0</sub>=55.0m/s </span></br>
<button class="button"id="speed-button-down" ><</button>&nbsp;
<span class="slider"  id="speed"></span>
<button class="button" id="speed-button-up">></button>
</br><br/>
<button id="button" >start</button> <button id="cleen" >cleen</button><br/>

<br/><br/>
<div class="result">
    <div id="effect" class="ui-widget-content ui-corner-all">
        <h3 class="ui-widget-header ui-corner-all">Result</h3>
<div id="showdiv">		
<table align="center" width="200">
  <tr>
    <td width="30">X<sub>0</sub></td>
    <td width="15">=</td>
    <td width="115" id="x0" align="center">&nbsp;</td>
	<td width="40">m</td>
  </tr>
  <tr>
    <td>Y<sub>0</sub></td>
    <td>=</td>
    <td id="y0" align="center">&nbsp;</td>
	<td>m</td>
  </tr>
  <tr>
    <td>V<sub>0x</sub></td>
    <td>=</td>
    <td id="v0x" align="center">&nbsp;</td>
	<td>m/s</td>
  </tr>
  <tr>
    <td height="24">V<sub>0y</sub></td>
    <td>=</td>
    <td id="v0y" align="center">&nbsp;</td>
	<td>m/s</td>
  </tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td height="21">S</td>
    <td>=</td>
    <td id="x" align="center">&nbsp;</td>
	<td>m</td>
  </tr>
  <tr>
    <td><p>Y</p></td>
    <td>=</td>
    <td id="y" align="center">&nbsp;</td>
	<td>m</td>
  </tr>
  <tr>
    <td>V<sub>x</sub></td>
    <td>=</td>
    <td id="vx" align="center">&nbsp;</td>
	<td>m/s</td>
  </tr>
  <tr>
    <td>V<sub>y</sub></td>
    <td>=</td>
    <td id="vy" align="center">&nbsp;</td>
	<td>m/s</td>
  </tr>
  <tr>
    <td height="21">t</td>
    <td>=</td>
    <td id="tfall"align="center">&nbsp;</td>
	<td>s</td>
  </tr>
</table>
</div>
</br>

    </div>
</div>
</div>
<canvas id="canvas" width="550" height="700" style="border:1px solid #d3d3d3;">
<audio autoplay>
<source src="../audio/Lab.wav" type="audio/wav">
<source src="../audio/Lab.ogg" type="audio/ogg">
<source src="../audio/Lab.mp3" type="audio/mpeg">
</audio>
</body>
</html>
